<template>
	<view class="container">
		<view class="tab-section">
			<template v-for="tab in statusList" :key="tab.id">
				<view 
					:class="{ 'tab-item': true, 'tab-item__actived': activeStatus === tab.id }"
					@click="handleStatusChange(tab.id)">
					<text>{{ tab.name }}</text>
				</view>
		 </template>
		</view>
		
		<view class="content-section">
			<order-list :orders="filteredOrders" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	// import { getOrderListByStatus } from '@/api/http/orderService' // 假设存在此接口
	import {getOrderList } from '@/api/http/orderList' // 订单列表组件
	import {Order } from '@/api/types/order' // 订单列表组件

	const userId = uni.getStorageSync('userId');
	const activeStatus = ref(1) // 默认显示全部状态
	// 定义状态导航数据
	const statusList = ref([
		{ id: 1, name: '全部' },
		{ id: 2, name: '待付款' },
		{ id: 3, name: '已付款' },
		{ id: 4, name: '进行中' },
		{ id: 5, name: '已完成' },
		{ id: 6, name: '已取消' }
	])
	// 订单数据存储
	const orders = ref<Order.orderType[]>([])

	// 根据状态筛选订单
	const filteredOrders = computed(() => {
		switch(activeStatus.value) {
			case 1:
				return orders
			case 2:
				return orders.value.filter(order => order.orderStatus === 2)
			case 3:
				return orders.value.filter(order => order.orderStatus === 3)
			case 4:
				return orders.value.filter(order => order.orderStatus === 4)
			case 5:
				return orders.value.filter(order => order.orderStatus === 5)
			case 6:
				return orders.value.filter(order => order.orderStatus === 6)	
			default:
				return []
		}
	})
	console.log("orders.value",orders.value);
	console.log("orders",orders);
	// 处理状态切换
	const handleStatusChange = async (statusId: number) => {
		activeStatus.value = statusId
		await fetchOrders(statusId) // 获取对应状态的订单数据
	}

	// 获取订单数据
	const fetchOrders = async (userId: number) => {
		try {
			const orders = await getOrderList(userId);
			console.log("xxxxxxx",orders)
		} catch (error) {
			console.error('Failed to fetch orders:', error)
		}
	}

	// 初始化加载数据
	onMounted(async () => {
		await fetchOrders(activeStatus.value)
	})
</script>

<style scoped lang="scss">
	.container {
		.tab-section {
			position: fixed;
			top: 1;
			left: 50%;
			transform: translateX(-50%);
			// display: flex;
			@include flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 2rpx;
				background: #cccfd3;
			}
			
			.tab-item {
				position: relative;
				padding: 0 10rpx;
				padding-bottom: 10rpx;
				font-size: 30rpx;//字体大小为30rpx。
				color: $uni-base-color;//字体颜色为定义好的 $uni-base-color
				height: 60rpx;//每个标签项的高度为60rpx。
				line-height: 60rpx;//行高为60rpx，实现文字垂直居中。
				text-align: center;//文字居中。
				font-weight: bold; /* 或者可以设置为 400, 500, 700 等数值，来调整字体的粗细 */
			}
			
			.tab-item__actived {
				color: $uni-primary;
				font-weight: bold; /* 选中标签的字体加粗 */
				
				&:after {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 80rpx;
					height: 5rpx;
					background: $uni-primary;
				}
			}
		}
		
		.content-section {
			margin-top: 70rpx;
			height: calc(100vh - 70rpx);
		}
	}
</style>